<template>
  <div class="home">
    <div class="container">
      <header :class="{ 'scrolled': isScrolled }">
        <div class="header-container">
          <div class="logo">超值会</div>
          <div class="search">
            <router-link to="/search">
              <input type="text" placeholder="搜索" />
              <i class="search-icon"></i>
              <router-link to="/voice">
                <i class="voice-icon"></i>
              </router-link>
            </router-link>
          </div>
          <div class="right">
            <i class="two"></i>
            <i class="message"></i>

          </div>
        </div>
      </header>
    </div>
    <div class="shopimg">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in banner" :key="item.id"><img style="width: 100%;" :src="item.img_url"
            alt=""></van-swipe-item>
      </van-swipe>
      <div class="Secondary">
        <best-list></best-list>
      </div>
      <recommendation-list></recommendation-list>
    </div>

    <floating-login></floating-login>

  </div>
</template>

<script>
import { banner } from '../api/index';
import Recommendationlist from '../components/Recommendationlist.vue'
import FloatingloginView from '../components/FloatingloginView.vue'
import bast from '../components/best.vue'
// import { Tab, Tabs } from 'vant';
export default {
  data() {
    return {
      banner: [],
      isScrolled: false, // 添加一个状态来跟踪滚动
    }
  },
  
  async created() {
    await banner()
      .then(
        content => {
          // let { code, data: { sections: [{ body }] } }= content;
          let { code, data: { data: { sections } } } = content;
          let img_url = sections[0].body.items;
          // 处理数据
          if (code === 0) {
            this.banner = img_url;
          }
        }
      )
      .catch(err => {
         console.log(err);
       });
  },
  methods: {
    handleScroll() {
      this.isScrolled = window.scrollY > 50; // 滚动超过50px时设置为true
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll); // 添加滚动事件监听
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll); // 移除事件监听
  },
  components: {
    'floating-login': FloatingloginView,
    'recommendation-list': Recommendationlist,
    'best-list': bast,
  }
}
</script>



<style lang="less" scoped>
body {
  height: 1000px;
}

.home {
  width: 100%;

  .container {
    width: 95%;
    margin: 0 auto;

    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 40px;
      background-color: #ffffff; // 背景颜色变为白色
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 999;
      transition: background-color 0.3s; // 添加过渡效果

      &.scrolled {
        // 添加滚动类的样式

        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); // 添加阴影
      }

      .header-container {

        width: 95%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .logo {
          width: 15%;
          font-size: 12px;
          font-weight: bold;
          color: #333;
          text-align: center;
        }

        .search {
          width: 60%;
          position: relative;
          height: 40px;
          display: flex;
          align-items: center;

          a {
            position: relative;
            height: 40px;
            display: flex;
            align-items: center;

            input {
              width: 100%;
              height: 30px;
              border: 1px solid #ccc;
              background-color: #fff;
              border-radius: 50px;
              padding-left: 40px;
              font-size: 14px;
              outline: none;
            }

            .search-icon {
              position: absolute;
              top: 50%;
              left: 10px;
              transform: translateY(-50%);
              display: block;
              width: 20px;
              height: 20px;
              background: url(../assets/img/search.png) no-repeat center / contain;
            }

            .voice-icon {
              position: absolute;
              top: 50%;
              right: 10px;
              transform: translateY(-50%);
              display: block;
              width: 20px;
              height: 20px;
              background: url(../assets/img/scan-code.png) no-repeat center / contain;
            }
          }
        }

        .right {
          width: 20%;
          display: flex;
          justify-content: space-around;
          align-items: center;

          .message,
          .two {
            display: inline-block;
            width: 20px;
            height: 20px;
            background-size: cover;
            cursor: pointer;
            /* 增加指针样式 */
          }

          .two {
            background-image: url(../assets/img/two.png);
          }

          .message {
            background-image: url(../assets/img/message.png);
          }
        }
      }
    }
  }

  .shopimg {
    margin-top: 40px;
  }

}
</style>
